<template>
  <div ref="lrcBox" class="lrc-container">
    <div
      v-for="(item,index) in contentList"
      :key="index"
      :style="{color:active == index?'hotpink':'black'}" @click="setProcess(item.time)"
    >{{item.content}}</div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Lrc",
  props: {
    lrcLink: String,
  },
  data() {
    return {
      contentList: [],
      active: 0,
      isCanScroll: true,
      setTimeoutId:null
    };
  },
  computed: {
    ...mapState(["currentTime"]),
  },
  watch: {
    currentTime() {
      // console.log('现在的播放时间为'+this.currentTime);

      //当前的时间、每一行的时间，找到激活的那一行

      for (let i = 0; i < this.contentList.length; i++) {
        if (this.contentList[i].time > this.currentTime) {
          if (i > 0) {
            this.active = i - 1;
            //获取容器的dom
            if (this.isCanScroll) {
              this.$refs.lrcBox.scrollTop =
                this.$refs.lrcBox.children[this.active].offsetTop - 100;
            }

            break;
          }
        }
      }
    },
  },
  mounted() {
    this.$refs.lrcBox.addEventListener("touchstart", () => {
      clearTimeout(this.setTimeoutId)
      this.isCanScroll = false
      console.log("我触摸了屏幕");
    });
    this.$refs.lrcBox.addEventListener("touchend", () => {
      console.log("我离开了屏幕");
      this.setTimeoutId=setTimeout(()=>{
          this.isCanScroll = true
      },2000)
    });
  },
  methods:{
setProcess(time){
this.$store.commit('changeProcessTime',{processTime:time})
}
  },
  created() {
    // 拿到了歌词数据
    let content =
      "[ti:大鱼]\r\n[ar:周深]\r\n[al:大鱼]\r\n[by:0]\r\n[offset:0]\r\n[00:02.27]大鱼 (《大鱼海棠》动画电影印象曲) \r\n[00:02.94]\r\n[00:03.63]作词：尹约\r\n[00:04.32]作曲：钱雷\r\n[00:04.91]演唱：周深\r\n[00:05.49]\r\n[00:43.27]海浪无声将夜幕深深淹没\r\n[00:50.09]漫过天空尽头的角落\r\n[00:56.79]大鱼在梦境的缝隙里游过\r\n[01:03.76]凝望你沉睡的轮廓\r\n[01:09.88]看海天一色 听风起雨落\r\n[01:16.48]执子手吹散苍茫茫烟波\r\n[01:23.61]大鱼的翅膀 已经太辽阔\r\n[01:31.09]我松开时间的绳索\r\n[01:37.30]怕你飞远去 怕你离我而去\r\n[01:43.87]更怕你永远停留在这里\r\n[01:50.76]每一滴泪水 都向你流淌去\r\n[01:58.58]倒流进天空的海底\r\n[02:04.68]\r\n[02:19.11]海浪无声将夜幕深深淹没\r\n[02:25.86]漫过天空尽头的角落\r\n[02:32.76]大鱼在梦境的缝隙里游过\r\n[02:39.58]凝望你沉睡的轮廓\r\n[02:45.63]看海天一色 听风起雨落\r\n[02:52.41]执子手吹散苍茫茫烟波\r\n[02:59.30]大鱼的翅膀 已经太辽阔\r\n[03:07.08]我松开时间的绳索\r\n[03:13.09]看你飞远去 看你离我而去\r\n[03:19.86]原来你生来就属于天际\r\n[03:26.68]每一滴泪水 都向你流淌去\r\n[03:34.51]倒流回最初的相遇\r\n[03:44.44]\r\n";
    // 处理这些歌词的数据
    const contentList = content.split("\r\n");
    console.log(contentList);

    // 实现歌词滚动
    //    1. 需要修改滚动的高度。
    //    2. 需要歌曲播放的进度
    //    3. 建立一下时间和歌词的对应关系（需要处理字符串的数据）
    //    4. 根据当前播放的时间，把对应的歌词滚动到中间

    contentList.forEach((item) => {
      // console.log(item);
      const reg = /\[\d*:\d*\.\d*\]/;
      let itemMatch = item.match(reg);
      // console.log(itemMatch);
      if (itemMatch) {
        // console.log(item)
        //处理时间
        let min = Number(itemMatch[0].match(/\[\d*/)[0].substr(1));
        let sec = Number(itemMatch[0].match(/:\d*/)[0].substr(1));
        let content = item.replace(itemMatch[0], "");
        // console.log(min * 60 + sec);

        if (content) {
          this.contentList.push({
            time: min * 60 + sec,
            content: item.replace(itemMatch[0], ""),
          });
        }
      } else {
        console.log(item);
      }
    });
  },
};
</script>

<style scoped lang="less">
.lrc-container {
  height: 250px;
  overflow: scroll;
  margin: 10px;
  text-align: center;
  line-height: 28px;
  position: relative;
}
</style>